<template>
  <view>
   <view class="search-box">
     <my-search @click="gotoSearch"></my-search>
   </view>
    <view class="Tit">
      <view class='tittle' v-for="(item,index) in titleList" :key="index" @click="changeAll(item.region)">
        {{item.name}}
        <uni-icons type="bottom" size="17"></uni-icons>
      </view>
    </view>
    
    <view class="cangpi" v-for="(item,index) in cangList" :key='index' @click="ToGoodsDetail(item)">
         <view class="imgBox">
            <image :src="item.photo" class="cang_img"></image>
         </view>
<!--          <view class="cang_name">
             <uni-icons type="fire-filled" size="15" color="red " v-if="index > 1?false:true"></uni-icons>
            {{item.goodName}}
          </view>
          <view class="kuai acthor">
            <text class="acthor_tit">
              作者：
            </text>
            {{item.author}}
          </view>
          <view class="kuai acthor">
            <text class="acthor_tit">
              发布时间：
            </text>
            {{item.time}}
          </view> -->

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cangList:[],
        titleList:[
          {
            name :'喜欢',
            region: 0
          },
          {
            name :'稀有',
            region: 1
          },
          {
            name :'收藏',
            region: 2
          },
          {
            name :'交换',
            region: 3
          },
        ]
      };
    },
    onLoad() {
      this.getAll()
    },
    methods: {
      async getAll() {
        const {data:res } = await uni.$http.get('/goods-exhibition/all')
        // console.log(res);
        if(res.code !== 200) {
          console.log("错误");
        }
        this.cangList = res.data
      },
      async changeAll(val) {
        const {data:res } = await uni.$http.get('/goods-exhibition/'+ val)
        // console.log(res);
        if(res.code !== 200) {
          console.log("错误");
        }
        this.cangList = res.data
      },
      gotoSearch() {
        uni.navigateTo({
        url: '/subpkg/search/search'
        })
      },
      ToGoodsDetail(val) {
        console.log(val);
        uni.navigateTo({
        url: '/subpkg/goodsDetail/goodsDetail?author=' + val.author + '&goodName=' + val.goodName + '&price=' +val.price
        })
      }
    }
  }
</script>

<style lang="scss">
  .Tit {
    display: flex;
    flex: 4;
    // background-color: #686868;
    color: #ffffff;
    height: 60rpx;
    line-height: 60rpx;
  }
  .tittle {
    justify-content: center;
    text-align: center;
    width: 25%;
    // border: 1rpx solid #efefef;
    // border-radius: 20rpx;
  }
  .cangpi {
    display: inline-block;
    // justify-content: space-around;
    // background-color: aqua;
    width: 45%;
    height: 500rpx;
    margin: 15rpx 18rpx;
    position: relative;
    background-color: #fff;
    border-radius: 20rpx;
    .kuai {
      display: inline-block;
    }
   .imgBox {
     width: 96%;
     height: 100%;
     margin: 10rpx auto;
     border-radius: 20rpx;
     overflow: hidden;
     .cang_img {
       width: 100%;
       height: 100%;
     }
   }
   .cang_name {
     font-weight: 700;
     font-size: 30rpx;
     margin-left: 20rpx;
   }
   .acthor {
     // background-color: #1fc2ca;
     border: 2rpx solid #efefef;
     border-radius: 10rpx;
     padding: 0rpx 10rpx;
     font-size: 20rpx;
     color: #9d9d9d;
     .acthor_tit {
       color: #000;
       font-weight: 700;
     }
   }
  }
  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
  }
</style>
